<template>

                    <div>
                    <el-table
                        v-loading="loading"
                        :data="dataList"
                        ref="singleTable"
                        @row-click="handleSelectionChange"
                        highlight-current-row
                        :header-cell-style="{background:'#DADDE9',color:'#000',height:'34px'}"
                        class="table-box"
                        max-height="280"
                    >
                        <el-table-column
                        type="index"
                        align="center"
                        width="80"
                       >
                        </el-table-column>
                        <el-table-column
                            label="异常名称"
                            :show-overflow-tooltip="true"
                            prop="abName"
                            align="center"
                            width="250"
                        />  
                        <el-table-column
                            label="所在区块"
                            :show-overflow-tooltip="true"
                            prop="blockName"
                            align="center"
                            width="150"
                        />  
                        <el-table-column
                            label="异常状态"
                            prop="abStatus"
                            :show-overflow-tooltip="true"
                            align="center"
                            
                        >
                        <template slot-scope="scope">
                            <span>{{dealState(scope.row.abStatus) }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                            label="异常类型"
                            prop="abType"
                            :show-overflow-tooltip="true"
                            align="center"
                            
                        >
                        <template slot-scope="scope">
                            <span>{{dealType(scope.row.abType) }}</span>
                        </template>
                        
                        </el-table-column>
                        <el-table-column
                            label="异常体坐标(X,Y)"
                            :show-overflow-tooltip="true"
                            prop="theGeom"
                            align="center"
                            width="450"
                        >
                        <template slot-scope="scope">
                            <span>{{dealThegeo(scope.row.theGeom) }}</span>
                        </template>
                        </el-table-column>
                          
                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding"
                            width="220"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="medium"
                                    type="text"
                                    
                                    @click.stop="handleUpdate1(scope.row)"
                                >查看详情</el-button>
                                <el-button
                                    size="medium"
                                    type="text"
                                    
                                    @click.stop="handleUpdate2(scope.row)"
                                >深度位置图</el-button>
                               
                                <el-button
                                    size="medium"
                                    type="text"
                                    class="deletBtn"
                                    @click.stop="handleDelete(scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>  
                    </el-table>
                </div>  
        <!-- </div> -->
</template>

<script>
import {delError} from "@/api/data/proData"
// import {flyToFeature} from '../showMap'
export default {
    name: "detailList",
    props: {
        //表格数据
        dataList: {
            type: Array
        },
        flyToFeature: {
            type: Function,
            default: null
        }
    },
    data() {
        return {
            loading: false,
            // 查询条件
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                field: "deviceName",
                keyword: undefined
            },
            // 总条数
            total: 100,
            // 是否显示弹出层
            open: false,
            //复测方式列表
            verificationList:[
            {
                id:'0',
                name: '空洞',
                disabled: false
            },
            {
                id:'1',
                name: '空脱',
                disabled: false
            },
            {	
                id:'2',
                name: '一般疏松体',
                disabled: false
            },
            {
                id:'3',
                name: '严重疏松体',
                disabled: false
            },
            {
                id:'4',
                name: '富水体',
                disabled: false
            }
        ],
        //异常状态列表
        stateList: [
            {
                id:'0',
                name: '未复测',
                disabled: false
            },
            {
                id:'1',
                name: '待验证',
                disabled: false
            },
            {	
                id:'2',
                name: '真异常',
                disabled: false
            },
            {
                id:'3',
                name: '假异常',
                disabled: false
            }
        ],
        };
    },
    created() {
    },
    computed: {
        popupData () {
            return this.$store.getters.popupData;　　//需要监听的地图点击数据
        }
        },
    watch:{
        popupData(val){
            if (val.abnormalId) {
                this.setCurrent(val)
            }
            else{
                this.setCurrent()
            }
        }
    },
    methods: {
        // 选中
        handleSelectionChange(val) {
            this.flyToFeature(val,'abnormalId','abName')
        },  
        //被选中
        setCurrent(row){
        
            this.$refs.singleTable.setCurrentRow(row);
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            let errorID = row.abnormalId;
            this.$confirm(`是否确认删除此条异常点数据项?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delError(errorID);
            }).then(() => {
                this.$emit('listenDeleteChange', row);
                this.msgSuccess("删除成功");
            }).catch(() => { })
        },
        /** 查看异常详情 */
        handleUpdate1(row) {
            const val= row.abnormalId;
            if(typeof jsToNative=="function"){ jsToNative('EnterAbnormalDetail','/detail/'+val)}
            else{
                this.$router.push({ name:'Detail/:ID',params:{ID:val} });
            }
        },
        /** 查看剖面图 */
        handleUpdate2(row) {
            const val= row.abnormalId;
            if(typeof jsToNative=="function"){ jsToNative('EnterAbnormalZphoto','/zphoto/'+val)}
            else{
                this.$router.push({ name:'Zphoto/:ID',params:{ID:val} });
            }
        },
        /** 查看地面关联图 */
        handleUpdate3(row) {
            const val= row.abnormalId;
           
        },
        handleUpdate4(row){
            const val= row.abnormalId;
        },
        //处理异常分类
        dealType(val){
            if(val){
                let data = this.verificationList.filter(item => { return item['id']==val })[0]
                return data.name
            }
            else{
                return ""
            }
        },
        //异常状态
		dealState(val){
				if (val){
					let data = this.stateList.filter(item => { return item['id']==val })[0]
                    return data.name
				}
				else{
					return ""
				}
			},
        dealThegeo(val){
            if(val){
                return val.replace("POINT","").replace("","").replace(" ",",")
            }
            else{
                return ""
            }
				
			},
    }
}
</script>
<style scoped>

.table-box{
    height: 280px;
}
.description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-block-end: 0px;
    margin-block-start: 0px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""; /*不用有内容也可以*/
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.formbox{
    padding:20px 20px;
}
.el-table td,.el-table th{
     padding: 8px 0
 }
.deletBtn{
    color:red
}
.deletBtn:focus{
    color:#C90009  !important
}
.deletBtn:hover,.deletBtn:visited{
    color: #C90009;
}
.hiddenbox{
    z-index: -10;
}
</style>

